<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>项目管理</title>
  </head>
  <body>
    
    <div class="container-fluid">
      <!-- 路径导航 -->
      <ol class="breadcrumb">
        <li><a href="${ctx}/workbench">主页</a></li>
        <li class="active">任务管理</li>
      </ol>
      <!-- /路径导航 -->
      
      <!-- 警告框 -->
      <c:if test="${not empty message }">
        <div class="alert alert-${message.state} alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert">
            <span aria-hidden="true">&times;</span>
            <span class="sr-noly">关闭</span>
          </button>
          ${message.message}
        </div>
      </c:if>
      <!-- ／警告框 -->
      
      <div class="panle panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">任务管理</h3>
        </div>
        <div class="panel-body">
          <form class="form-inline" action="#" role="form">
            <div class="form-group">
              <label for="task-title">任务标题</label>
              <input type="text" class="form-control" id="task-title" name="search_LIKE_title" value="${param.search_LIKE_title}" placeholder="任务名称">
            </div>
            <button type="button" class="btn btn-default" id="search-id">查询</button>
            <tags:sort/>
          </form>
          <hr>
          <!-- 响应式表格:将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格.-->
	      <!-- 其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失 -->
	      <div class="table-responsive">
	        <table class="table table-hover">
	          <thead>
	            <tr>
	              <th>任务</th>
	              <th>管理</th>
	            </tr>
	          </thead>
	          <tbody>
	            <c:forEach items="${tasks.content}" var="task">
	              <tr>
	                <td>${task.title}</td>
	                <td>
	                  <a class="text-info" href="${ctx}/task/update/${task.id}">修改</a> / 
	                  <a class="text-danger" href="${ctx}/task/delete/${task.id}" onclick="return confirm('是否删除该任务？')">删除</a>
	                </td>
	              </tr>
	            </c:forEach>
	          </tbody>
	        </table>
	      </div>
	      <div class="pull-right">
	        <tags:pagination paginationSize="5" page="${tasks}"/>
	      </div>
	      <div class="pull-left">
	        <a class="btn btn-default" href="${ctx}/task/create">添加任务</a>
	      </div>
        </div>
      </div>
      
    </div>

    <!-- 以下开始 加载JS动态效果 -->
  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="${ctx}/static/jquery/jquery-1.11.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${ctx}/static/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
  </body>
</html>